<template>
  <div>
    <div class="top">
      <div>{{$t('message.Fiat')}}</div>
    </div>
    <div class="info">
      <!-- 总收益 -->
      <div style="display:flex">
        <div class="infoitem">
          <div class="img">
            <!-- 收益明细 -->
            <div class="detail">
              <ul>
                <li>{{$t('message.replacement')}}（USDT）</li>
                <li
                  style="padding-top:7px !important ;font-size:13px;font-family:PingFang-SC-Bold;font-weight:bold;color:rgba(56,83,118,1);"
                  class="word"
                >
                  <div>
                    0.00000000
                    <span>≈0.00CNY</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div style="justify-content:space-between;display:flex">
        <!-- 请搜索币种 -->
        <div class="sousuo">
          <i class="el-icon-search"></i>
          <input type="text" :placeholder="$t('message.searchfor')" />
        </div>
        <!-- 财务记录 -->
        <div class="recorditm">{{$t('message.Financial')}}</div>
      </div>
      <!-- 列表 -->
      <div class="detailitem">
        <div class="project">{{$t('message.types')}}</div>
        <div class="project">{{$t('message.available')}}</div>
        <div class="project">{{$t('message.freeze')}}</div>
        <div class="project">CNY{{$t('message.valuation')}}</div>
        <div class="project">{{$t('message.operation')}}</div>
      </div>
      <div class="line"></div>
      <div class="detailitem">
        <div class="project">SGXC</div>
        <div class="project">0.00000000</div>
        <div class="project">0.00000000</div>
        <div class="project">0.00000000</div>
        <div style="color:#478EE5" class="project">
          {{$t('message.Toview')}}
          <span style="color:#478EE5;margin-left:25px">{{$t('message.Mention')}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 1);
  box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
  div {
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(56, 83, 118, 1);
    line-height: 50px;
    margin-left: 9px;
  }
}
.info {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  margin-top: 10px;
  padding-bottom: 15px;
  .detailitem {
    display: flex;
    .project {
      flex: 1;
      font-size: 12px;
      font-family: PingFang-SC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin-left: 10px;
      margin-top: 15px;
    }
  }
  .sousuo {
    width: 150px;
    height: 30px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(230, 230, 230, 1);
    border-radius: 20px;
    margin-left: 10px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    input {
      width: 100px;
      height: 20px;
      border: none;
      margin-left: 10px;
      outline: none;
    }
  }
  .infoitem .img {
    background: url(../../assets/img/SS.png) no-repeat;
    background-size: 100%100%;
    width: 300px;
    height: 160px;
    margin-top: 20px;
    margin-left: 10px;
    .detail ul li {
      font-size: 10px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
      padding-top: 60px;
      list-style: none;
      span {
        font-size: 10px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }

  .tady {
    font-size: 13px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    margin-top: 13px;
    margin-left: 65px;
  }
  .line {
    width: 96%;
    margin: 5px auto;
    height: 1px;
    background: rgba(244, 244, 244, 1);
  }
  //   财务记录
  .recorditm {
    width: 90px;
    height: 30px;
    border: 1px solid rgba(56, 83, 118, 1);
    border-radius: 18px;
    font-size: 13px;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(56, 83, 118, 1);
    align-items: center;
    margin-top: 40px;
    text-align: center;
    line-height: 30px;
  }
}
</style>


